<!DOCTYPE html>
<html lang="zh-hans-CN">
<head>
  <meta charset="UTF-8">
  <title>评价</title>
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta name="format-detection" content="telephone=no">
  <meta name="format-detection" content="email=no">
  <link rel="stylesheet" href="../css/frozen.css">
  <link rel="stylesheet" href="../css/style.css">
</head>
<body>

<section class="eva-content">
  <div class="consum consum-p">
    <div class="consun-content ui-border-radius">
      <h4><i class="i-logo"></i> 北京朝阳区西桥站点加油站J306口</h4>
      <p>消费余额：198</p>
      <p>优惠余额：20</p>
      <p>消费时间：2016-06-15 12:10</p>
      <p>余额：2270</p>
    </div>
  </div>
  <div class="start-content">
    <label class="start-eva" data-start="0"></label>
    <p></p>
  </div>

  <div class="eva-crl">
    <div class="eva-input-box">
      <p>建议：</p>
      <div class="textarea ui-border-radius"><textarea placeholder="说点儿什么吧..."></textarea></div>
    </div>
    <div class="ui-btn-wrap pro-btn-group">
      <a href="user_consumption.html" class="ui-btn-lg ui-btn-danger">确定</a>
    </div>
  </div>

  <div class="eva-info eva-input-box" hidden>
    <p>加油速度提高下就好了！没什么建议，
      服务态度很让人生气，语气和表情简直是遇
      到了敌人一样。杀了我得了啊，什么破态度</p>
  </div>

</section>

<script src="../lib/zepto.min.js"></script>
<script src="../lib/layer.js"></script>
<script src="../js/frozen.js"></script>
<script src="../js/main.js"></script>
<script>
  /**
   * 点击星星进行评价
   * @param name 元素
   * @constructor
   */
  function StartEva(name) {
    this.name = name;
    this._init();
  }
  StartEva.prototype = {
    tag: function () {
      var num = $(this.name).data('start'),
          _html = [],
          startA = '<i class="act" data-id="__i__"></i>',
          start = '<i data-id="__i__"></i>',
          i = 1;
      this.evaluation(num);
      while (i <= 5) {
        num > 0 ? _html.push(startA.replace(/__i__/, i)) : _html.push(start.replace(/__i__/, i));
        i++;
        num--;
      }
      $(this.name).html(_html.join(''));
    },
    evaluation: function (num) {
      $(this.name).next().html(this.eva[num]);
    },
    startCli: function (e, that) {
      var parent = $(e.target).parent(),
          id = $(e.target).data('id');
      parent.data('start', id);
      that.tag();
    },
    event: function () {
      var _this = this;
      $(this.name).on('tap', 'i', function (e) {
        _this.startCli(e, _this);
      });
    }
  };
  /* 评价的内容 */
  StartEva.prototype.eva = [
    '请评价',
    '非常不满意，各方面都很差',
    '不爽',
    '一般，需要改善',
    '还好吧',
    '非常好，点赞'
  ];
  /**
   * 初始化方法
   * @private
   */
  StartEva.prototype._init = function () {
    this.tag();
    this.event();
  };

  var start = new StartEva('.start-eva');
</script>
</body>
</html>